<template>
    <div class="main">
        <el-container class="subbox">
            <el-aside :width="!flag?'200px':'63px'">
                <Menu></Menu>
            </el-aside>
                <el-container class="mbox">
                    <el-header>
                       <Header></Header>
                    </el-header>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                    <el-footer>
                        <Footer></Footer>
                    </el-footer>
                </el-container>
        </el-container>
    </div>
</template>
<script>
import Header from '@/components/header.vue';
import Menu from '@/components/menu.vue';
import Footer from '@/components/footer.vue';
import {useStore} from 'vuex';
import { onMounted } from 'vue';
export default {
    components:{
        Header,
        Menu,
        Footer
    },
    setup(props){
        const store = useStore();
        onMounted(()=>{
            store.dispatch('getUserInfo');
            store.dispatch('getCateInfo');
            store.dispatch('getRoleInfo');
            store.dispatch('getTypeInfo');
        })
    }

}
</script>
<style lang="scss" scoped>
.main{
    width:100%;
    height:100%;
    .subbox{
        width:100%;
        height:100%;
        .el-aside{
             background: #303030;
        }
        .mbox{
            .el-footer{
                background: #f4f4f4;
                 width:100%;
                height:50px;
                
            }
            .el-header{
                background: #f4f4f4;
            }
            .el-main{
                padding: 0;
            }
        }
    }
}
</style>